This is needed to unify yql syntax highlight. For now it will use textmate grammar from monaco-yql-languages, which is generated by yql backend team.

Stand

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Bundle Size: 🔺

Current: 66.08 MB | Main: 47.46 MB
Diff: +18.62 MB (39.23%)

⚠️ Bundle size increased. Please review.

• New Implementation: Created shikiHighlighter.ts with singleton pattern, lazy loading, and efficient caching of languages/themes
• Component Refactor: YDBSyntaxHighlighter now uses async rendering with loading states and proper cleanup
• Custom Themes: Implemented YQL-specific light/dark themes matching Monaco editor colors
• Dependency Update: Replaced react-syntax-highlighter (and its types) with shiki 3.15.0
• Bundle Optimization: Dynamic import of Shiki library reduces initial bundle (though overall bundle increased by 18.62 MB due to Shiki's size)

Implementation Quality

The implementation follows good patterns:

• Proper singleton pattern prevents multiple Shiki instances
• Lazy loading defers Shiki import until first use
• Language and theme caching avoids redundant loading
• Effect cleanup prevents memory leaks with cancellation tokens
• Loading state provides good UX during async highlighting

Notable Observations

• The 39% bundle increase (18.62 MB) is expected given Shiki's comprehensive language support and WASM-based highlighting engine
• The migration maintains backward compatibility - existing component usage patterns remain unchanged
• The effect re-runs on every text change which may cause frequent re-highlighting in interactive scenarios

Confidence Score: 5/5

• This PR is safe to merge with no blocking issues
• The implementation is well-structured with proper error handling, memory management, and caching. The migration is complete and maintains API compatibility. The bundle size increase is acceptable given the feature requirements. No logic errors, security issues, or breaking changes detected.
• No files require special attention

Important Files Changed

File Analysis

Sequence Diagram

sequenceDiagram
    participant Component as YDBSyntaxHighlighter
    participant Hook as useEffect
    participant Highlighter as shikiHighlighter
    participant Shiki as Shiki Library
    participant Cache as Language/Theme Cache

    Component->>Hook: Mount with text, language, themeType
    Hook->>Highlighter: highlightCode(text, language, themeType)
    
    alt First use of Shiki
        Highlighter->>Shiki: Dynamic import('shiki')
        Shiki-->>Highlighter: createHighlighter instance
        Note over Highlighter: Cache highlighter promise
    end
    
    Highlighter->>Cache: Check if language loaded
    alt Language not in cache
        Highlighter->>Shiki: loadLanguage(yql or bundled)
        Shiki-->>Highlighter: Language loaded
        Highlighter->>Cache: Add to loadedLanguages
    end
    
    Highlighter->>Cache: Check if theme loaded
    alt Theme not in cache
        Highlighter->>Shiki: loadTheme(custom or bundled)
        Shiki-->>Highlighter: Theme loaded
        Highlighter->>Cache: Add to loadedThemes
    end
    
    Highlighter->>Shiki: codeToHtml(code, lang, theme)
    Shiki-->>Highlighter: HTML string with syntax highlighting
    Highlighter-->>Hook: Return HTML
    Hook->>Component: setHighlightedHtml(html)
    Component->>Component: Render with dangerouslySetInnerHTML
    
    Note over Component: On text/language/theme change
    Component->>Hook: Re-run effect
    Hook->>Highlighter: highlightCode (cached instances)
    Note over Cache: Reuses cached language/theme
    Highlighter-->>Component: New highlighted HTML